<template>
  <div class="user-profile">
    <h1>{{ title }}</h1>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <p>Name: {{ user.name }}</p>
      <p>Age: {{ userAge }}</p>
      <p>Email: {{ user.email }}</p>
      <button @click="incrementAge">Increment Age</button>
      <button @click="fetchUserData">Refresh</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestVueComponent',
  data() {
    return {
      title: 'User Profile',
      loading: false,
      user: {
        name: 'John Doe',
        age: 25,
        email: 'john@example.com'
      }
    }
  },
  computed: {
    userAge() {
      return this.user.age + ' years old';
    },
    isAdult() {
      return this.user.age >= 18;
    }
  },
  methods: {
    incrementAge() {
      this.user.age++;
    },
    async fetchUserData() {
      this.loading = true;
      try {
        const response = await fetch('/api/user');
        const userData = await response.json();
        this.user = userData;
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        this.loading = false;
      }
    },
    validateUser() {
      return this.user.name && this.user.email;
    }
  },
  watch: {
    'user.age'(newAge, oldAge) {
      console.log(`Age changed from ${oldAge} to ${newAge}`);
    }
  },
  mounted() {
    console.log('Component mounted');
    this.fetchUserData();
  },
  beforeDestroy() {
    console.log('Component will be destroyed');
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>